<template>
  <div class="container">
    <div class="app-container">
      <el-tree :props="defaultProps" :data="depts" default-expand-all>
        <template v-slot="{data}">
          <el-row type="flex" style="width: 100%; height: 40px;">
            <el-col>{{ data.name }}</el-col>
            <el-col>
              <!-- <el-col :span="2"> -->
              <el-row type="flex" justify="end">
                <span class="username">管理员</span>
                <el-dropdown>
                  <span class="username">
                    操作<i class="el-icon-arrow-down" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子项目</el-dropdown-item>
                    <el-dropdown-item>编辑项目</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Approvals',
  data() {
    return {
      depts: [
        {
          name: '1',
          children: [
            {
              name: 2,
              children: [
                {
                  name: 3
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  }
}
</script>

<style scoped>
  .app-container {
    padding: 30px 50px;
  }
  .username {
    font-size: 14px;
    margin-right: 10px;
  }
</style>
